import React, {Component} from 'react'
import {TabBar} from 'antd-mobile'
import {withRouter} from 'react-router-dom'
import {connect} from 'react-redux'

import {changePath} from '../../../actions/routerAction'
import './navFooter.scss'

@connect(
    state=>state.routerReducer,
    {changePath}
)
class NavFooter extends Component {
    constructor(props) {
        super(props);
        this.state={
            selectedTab: 'index',
            tabbars:[
                {
                    icon:require('../../../assets/navFooterIcons/index.png'),
                    selectedIcon:require('../../../assets/navFooterIcons/index_active.png'),
                    title:'首页',
                    key:'index'
                },
                {
                    icon:require('../../../assets/navFooterIcons/categlory.png'),
                    selectedIcon:require('../../../assets/navFooterIcons/categlory_active.png'),
                    title:'分类',
                    key:'cate'
                },
                {
                    icon:require('../../../assets/navFooterIcons/cart.png'),
                    selectedIcon:require('../../../assets/navFooterIcons/cart_active.png'),
                    title:'购物车',
                    key:'cart'
                },
                {
                    icon:require('../../../assets/navFooterIcons/my.png'),
                    selectedIcon:require('../../../assets/navFooterIcons/my_active.png'),
                    title:'个人中心',
                    key:'my'
                }
            ]
        }
    }
    componentWillMount(){
        this.setState({
            selectedTab:this.props.location.pathname==='/'?'index':this.props.location.pathname.substring(1)
        })
    }
    styleImage(url){
        return (
            <div style={{
                width: '22px',
                height: '22px',
                background: 'url('+url+') center center /  21px 21px no-repeat' }}
            />
        )
    }
    calcPath(){
        if(this.props.currentPath==='/index'||this.props.currentPath==='/'){
            return 'index'
        }else{
            return this.props.currentPath.substring(1)
        }
    }
    render() {
        return (
            <div className='footer'>
                <TabBar
                    unselectedTintColor="#707070"
                    tintColor="#ff5b05"
                    barTintColor="white"
                >
                    {
                        this.state.tabbars.map((v,i)=>{
                            return (
                                <TabBar.Item
                                    badge={v.key==='cart'&&this.props.cartNum>0?this.props.cartNum:null}
                                    key={i}
                                    title={v.title}
                                    icon={
                                        this.styleImage(v.icon)
                                    }
                                    selectedIcon={
                                        this.styleImage(v.selectedIcon)
                                    }
                                    selected={this.props.currentPath?this.calcPath()===v.key:this.state.selectedTab === v.key}
                                    onPress={() => {
                                        this.setState({
                                            selectedTab: v.key,
                                        });
                                        this.props.history.push('/' + v.key);
                                        this.props.changePath('/' + v.key);
                                        sessionStorage.setItem('__search_prev_path__','/'+v.key)
                                    }}
                                >
                                </TabBar.Item>
                            )
                        })
                    }
                </TabBar>
            </div>

        )
    }
}

export default withRouter(NavFooter);